import React from 'react';
import { connect } from "dva";
import { Redirect } from 'dva/router';
import { Button, Checkbox, Col, Form, Icon, Input, Row, message } from 'antd';

import { SESSION } from '@/constants/ModelNamespaces';
import HashUtil from '@/utils/HashUtil';
import StringUtils from "@/utils/StringUtils";
import StorageUtils from '@/utils/StorageUtils';
import styles from './style.less';

const FormItem = Form.Item;

interface LoginProps {
  form: any;
  login: any;
  state: any;
  dispatch: any;
  loading: boolean;
}
class LoginView extends React.Component<LoginProps, any> {
  constructor(props: LoginProps) {
    super(props);
    // this.state = {
    //   registerVisible: false //添加窗口
    // };
  }

  handleSubmit = e => {
    e.preventDefault();//阻止浏览器的默认提交行为
    //收集表单数据,并处理.
    this.props.form.validateFields((err, values) => {
      if (!err) {
        values['platform'] = 'pc';
        values.password = HashUtil.md5(values.password);//密码做hash处理.
        this.props.login(values);
      }
    });
  }

  render() {
    let sessionId = StorageUtils.getSessionId();
    let isLoginSuccess = StringUtils.isNotBlank(sessionId);
    if (isLoginSuccess) {
      return (<Redirect to="/" />);
    }

    const { getFieldDecorator } = this.props.form;
    // 想要整个上下居中的效果,需要顶层的容器也是height:'100%'
    return (
      <Row style={{ height: '100%' }} type="flex" justify="space-around" align="middle">
        <Col>
          <Form onSubmit={this.handleSubmit} >
            <FormItem>
              {getFieldDecorator('username', {
                rules: [{ required: true, message: '请输入你的用户名/邮箱/手机号!' }]
              })(
                <Input prefix={<Icon type="user" style={{ fontSize: 13 }} />} placeholder="请输入用户名/邮箱/手机号" autoComplete="on" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('password', {
                rules: [{ required: true, message: '请输入你的密码!' }]
              })(
                <Input prefix={<Icon type="lock" style={{ fontSize: 13 }} />} type="password" placeholder="密码" autoComplete="off" />
              )}
            </FormItem>
            <FormItem>
              {getFieldDecorator('remember', {
                valuePropName: 'checked',
                initialValue: true
              })(
                <Checkbox>记住我</Checkbox>
              )}
              <a className={styles['login-form-forgot']}>忘记密码?</a>
              <Button type="primary" htmlType="submit" className={styles['login-form-button']} loading={this.props.loading}>登  陆</Button>
              {/* <a onClick={this.openUserAddView}>新用户注册!</a> */}
            </FormItem>
          </Form>
          {/* <RegisterView
          visible={this.state.registerVisible}
          handleOk={this.userAddHandleOk}
          handleCancel={this.userAddHandleCancel}
      /> */}
        </Col>
      </Row>
    );
  }
}

/******************************************************** 容器组件 **********************************/
const namespace = SESSION;

const mapStateToProps = state => {
  const sessionState = state[namespace];
  return {
    state: sessionState,
    loading: state.loading.models.session
  };
};

const mapDispatchToProps = dispatch => {
  return {
    dispatch: dispatch,
    login: values => {
      const action = { type: `${namespace}/login`, payload: values };
      dispatch(action);
    },
  };
};

let formedLoginView = Form.create()(LoginView);

// 把包装后的重新导出. @connect(mapStateToProps, mapDispatchToProps)
export default connect(mapStateToProps, mapDispatchToProps)(formedLoginView);

